import React from 'react';
// import ReactDOM from 'react-dom';
import { Button,Table,Pagination, Message } from 'element-react';
import {Link} from "react-router-dom";
import 'element-theme-default';
import axios from 'axios';

class Cargos extends React.Component{
    constructor(props) {
        super(props);  
        this.getPage = this.getPage.bind(this);
        // this.removeInfo = this.removeInfo.bind(this);
        this.editInfo = this.editInfo.bind(this);

        this.state = {
          columns: [
            {label: "编号",prop: "id",width: 80, align:"center", columnKey:"id"},
            {label: "名称",prop: "name",width: 150, align:"center"},
            {label: "重量 / kg",prop: "weight",width: 100, align:"center"},
            {label: "库存 / 件",prop: "rest",width: 100, align:"center"},
            {label: "产地",prop: "made",width: 150, align:"center"},
            {label: "生产商",prop: "maker",width: 120, align:"center"},
            {label: "备注",prop: "remark", align:"center"},
            {label: "操作", align:"center", width: 150, render: (row,column,index)=>{
                return <span>
                            <Button type="danger" size="small" onClick={this.removeInfo.bind(this,row)}>删除</Button>
                            <Link to="/toEdit">
                                <Button type="info" size="small" onClick={this.editInfo.bind(this,row)}>编辑</Button>
                            </Link>    
                        </span>
              }
            },
          ],
            list: [],
            pageSize: 5, totalPages: 0, total:0, pageIndex: 1
        }

        
    }

    componentWillMount(){
    }
      
    async componentDidMount(){
        let _this = this;
        axios.get("http://localhost:8090/cargo/list/0/5").then(function(resp){
            let resultSet = resp.data;
            _this.setState({list:resultSet.content, 
                total: resultSet.totalElements, 
                totalPages:resultSet.totalPages
            });
        });
    }

    //查找当前页
    getPage(currentPage){
        let _this = this;
        axios.get("http://localhost:8090/cargo/list/"+(currentPage-1)+"/"+(this.state.pageSize)).then(function(resp){
            let resultSet = resp.data;
            _this.setState({list:resultSet.content, 
                total: resultSet.totalElements, 
                totalPages:resultSet.totalPages, pageIndex: currentPage
            });
        });
    }
    //删除
    removeInfo(row){
        let id = row.id; //编号
        let currPage  =  this.state.pageIndex;
        let _this = this;
        // console.log("当前页面索引: "+currPage);
        axios.delete("http://localhost:8090/cargo/remove/"+id).then( function(resp){
            Message({message:'删除成功！', type:"success",showClose:true,onClose(){
                _this.getPage(currPage);
            }});
        } );
    }

    editInfo(row){
        // console.log(row);
        this.props.fun(row);
    }

    render() {
        return (
            <div style={{width: '100%',margin:'0 auto'}}>
                <Table columns={this.state.columns} data={this.state.list} stripe={true}>
                </Table>
                <div className="block">
                    <Pagination layout="total,prev, pager, next" 
                        total={this.state.total} 
                        pageSize={this.state.pageSize} currentPage={this.state.pageIndex}
                        onCurrentChange={this.getPage}/>
                </div>
            </div>
        );
    }
      

    
};

export default Cargos;

